@import (reference) '../../variables.less';

.@{prefix}-previewer {
  background-color: #fff;
  border-radius: 1px;

  [data-prefers-color='dark'] & {
    background-color: @c-bg-dark;
    border-color: @c-border-dark;
  }

  &[data-debug] {
    .debug-badge {
      display: inline-block;
      padding: 2px 6px;
      color: #735600;
      background-color: #ffcb00;
      border-radius: 2px;
    }
    &::before {
      float: left;
      margin-top: -18px;
      margin-left: -1px;
      padding: 3px 6px;
      color: #735600;
      font-size: 12px;
      line-height: 1;
      text-shadow: 0.5px 0.5px 0 rgba(255, 255, 255, 0.5);
      background-color: #ffcb00;
      border-top-left-radius: 1px;
      border-top-right-radius: 1px;
      content: 'DEV ONLY';
    }
  }

  &[data-iframe] {
    .@{prefix}-previewer-browser-nav {
      padding: 2px 6px;
      background-color: var(--doc-border-color);

      &::before {
        @s-btn: 12px;
        @s-btn-gap: 8px;
        display: inline-block;
        width: @s-btn;
        height: @s-btn;
        background-color: #fd6458;
        border-radius: 50%;
        box-shadow: (@s-btn + @s-btn-gap) 0 0 #ffbf2b, (@s-btn + @s-btn-gap) * 2 0 0 #24cc3d;

        content: '';
      }
    }

    .@{prefix}-previewer-demo > iframe {
      width: 100%;
      height: 300px;
      border: 0;
    }
  }

  + .@{prefix}-previewer {
    margin-top: 32px;
  }

  &-demo {
    padding: 40px 24px;
  }

  &-target {
    border-color: fade(@c-primary, 50%);
    box-shadow: 0 0 0 5px fade(@c-primary, 5%);
  }

  &-desc {
    > div:last-child {
      padding: 1.2em 1em 1em;
      color: @c-text;
      border-top: 1px solid var(--doc-border-color);
    }

    .markdown > p:first-child {
      margin-top: 0;
    }

    .markdown > p:last-child {
      margin-bottom: 0;
    }

    &[data-title] {
      position: relative;

      > a:first-child {
        position: absolute;
        top: 0;
        left: 1em;
        margin-left: -4px;
        padding: 0 4px;
        color: @c-heading;
        font-weight: 500;
        font-size: inherit;
        background: linear-gradient(
            to top,
            rgba(255, 255, 255, 1),
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, 0)
          )
          100%;
        transform: translateY(-50%);
        cursor: pointer;
        pointer-events: auto;

        [data-prefers-color='dark'] & {
          color: @c-heading-dark;
          background: linear-gradient(to top, @c-bg-dark, @c-bg-dark 50%, rgba(255, 255, 255, 0))
            100%;
        }
      }

      &:empty {
        padding-top: 0;

        // modify action area style when only has title field
        + .@{prefix}-previewer-actions {
          height: 46px;
          border-top-style: solid;
        }
      }
    }
  }

  &-actions {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 1em;
    border-top: 1px dashed var(--doc-border-color);

    > a:not(:last-child),
    > button:not(:last-child) {
      margin-right: 8px;
    }

    > a {
      display: flex;
    }

    button {
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      width: 16px;
      height: 16px;
      padding: 0;
      border: 0;
      outline: none;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.2s, background 0.2s;

      [data-prefers-color='dark'] & {
        opacity: 1;
      }

      // expand click area
      &::after {
        position: absolute;
        top: -8px;
        right: -8px;
        bottom: -8px;
        left: -8px;
        content: '';
      }

      &:hover {
        opacity: 0.8;
      }

      &:active {
        opacity: 0.9;
      }

      &:disabled {
        cursor: not-allowed;
        opacity: 0.2;
      }

      &[role='codesandbox'] {
        background-position: -18px 0;
      }

      &[role='codepen'] {
        background-position: -36px 0;
      }

      &[role='source'] {
        background-position: -72px 0;
      }

      &[role='change-jsx'] {
        background-position: -90px 0;
      }

      &[role='change-tsx'] {
        background-position: -108px 0;
      }

      &[role='open-demo'] {
        background-position: -126px 0;
      }

      &[role='motions'] {
        background-position: -162px 0;
      }

      &[role='sketch-component'] {
        background-position: -182px 0;
      }

      &[role='sketch-group'] {
        background-position: -200px 0;
      }

      &[role='copy'][data-status='ready'] {
        background-position: -54px 0;
      }

      &[role='copy'][data-status='copied'] {
        background-position: -54px -16px;
        pointer-events: none;
      }

      &[role='refresh'] {
        background-position-x: -144px;
      }
    }

    .spacer {
      flex: 1;
    }
  }

  &-source {
    border-top: 1px solid @c-border-inner;

    [data-prefers-color='dark'] & {
      border-color: @c-border-dark;
    }

    &-tab {
      border-top: 1px solid @c-border-inner;
      --title-font-size: 14px;
      .mat-tabs-header {
        border-bottom: none;
      }
    }
  }
}

.@{prefix}-tabs {
  overflow: hidden;

  &-nav {
    display: flex;

    &-wrap {
      display: flex;
      overflow: hidden;
      white-space: nowrap;

      &&-ping-left {
        box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.1) inset;
      }

      &&-ping-right ~ * > .@{prefix}-tabs-nav-more {
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      }
    }

    &-list {
      position: relative;
      display: flex;
      transition: transform 0.2s;
    }

    &-more {
      height: 100%;
      background: none;
      border: 0;
      cursor: pointer;
      transition: box-shadow 0.2s;
    }
  }

  &-tab {
    display: flex;

    &-btn {
      box-sizing: border-box;
      padding: 0 16px;
      font-size: 14px;
      line-height: 36px;
      background: transparent;
      border: 0;
      outline: none;
      cursor: pointer;

      &:hover {
        color: @c-primary;
      }
    }
  }

  &-ink-bar {
    position: absolute;
    height: 2px;
    background: @c-primary;
    transition: left 0.2s, width 0.2s;
    pointer-events: none;

    [data-prefers-color='dark'] & {
      background: @c-primary-dark;
    }
  }

  &-dropdown {
    position: absolute;
    max-height: 200px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--doc-border-color);

    > ul {
      margin: 0;
      padding: 0;
      list-style: none;

      > li {
        padding: 4px 12px;
        font-size: 14px;
        cursor: pointer;

        &:hover {
          color: @c-primary;
        }

        &:not(:last-child) {
          border-bottom: 1px dashed var(--doc-border-color);
        }
      }
    }

    &-hidden {
      display: none;
    }
  }
}
